document.addEventListener('DOMContentLoaded', () => {
    const visualizerContainer = document.getElementById('visualizer-container');

    // 随机生成动画时长、延迟、颜色变化
    function generateRandomStyle(n) {
        const randomHeight = Math.random() * 60 + 40; // 随机高度 (40% 到 100%)
        const randomDelay = Math.random() * 2; // 随机延迟 (0 到 2秒)
        const randomDuration = Math.random() * 2 + 2; // 随机持续时间 (2 到 4秒)
        const colorHue = (n * 15) % 360; // 生成动态颜色，改变色相
        const opacity = Math.random() * 0.3 + 0.3; // 随机透明度 (0.3 到 0.6)

        return {
            '--i': randomHeight,
            'animationDelay': `${randomDelay}s`,
            'animationDuration': `${randomDuration}s`,
            'backgroundColor': `hsla(${colorHue}, 70%, 70%, ${opacity})`, // 动态颜色和透明度
        };
    }

    // 生成律动条
    function generateBars() {
        for (let i = 0; i < 80; i++) {
            const bar = document.createElement('div');
            bar.classList.add('bar');

            // 应用随机样式
            const style = generateRandomStyle(i);
            Object.assign(bar.style, style);

            visualizerContainer.appendChild(bar);
        }
    }

    generateBars(); // 页面加载时生成律动条
});
